<template>
  <view :style="{padding: `0 ${offsetX}rpx`}" class="w-sk">
    <view :style="warpStyle" class="sk">
      <view :style="oStyle" class="o"></view>
      <view :style="eleStyle" class="t"></view>
      <view ref="v" :style="vStyle" class="v">
        <slot />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    width: {
      type: [Number, String],
      default: 0
    },
    height: {
      type: [Number, String],
      default: '',
    },
    offsetX: {
      type: Number,
      default: 0
    },
    offsetY: {
      type: Number,
      default: 0
    },
    radius: {
      type: Number,
      default: 0
    },
    bgc:{
      type: String,
      default: ""
    },
    bc:{
      type: String,
      default: ""
    }
  },
  computed: {
    warpStyle () {
      return this.width ? 
       {
        width: this.width ? this.width + 'rpx' : '100%',
        height: (this.height || this.width) ? (this.height || this.width) + 'rpx' : '',
        'border-radius': this.radius + 'rpx'
      }:{
        'border-radius': this.radius + 'rpx',
        'margin-bottom': (this.offsetY * 2) - 4 + 'rpx'
        
      }
    },
    oStyle(){
      return {
        height: (this.height || this.width) ? '100%' : `calc(100% + ${this.offsetY + 14}rpx)`,
        'border-radius': this.radius + 'rpx',
        border: `1PX solid ${this.bc}`,
        background: this.bgc
      }
    },
    eleStyle () {
      return {
        width: this.width ? (this.width + this.offsetX * 2) + 'rpx' : `calc(100% + ${this.offsetX * 2}rpx)`,
        height: (this.height || this.width) ? ((this.height || this.width) - (this.offsetY * 2)) + 'rpx' : `100%`,
        transform: `translateX(-${this.offsetX}rpx) translateY(${this.offsetY}rpx)`,
        'border-radius': this.radius + 'rpx',
        border: `1PX solid ${this.bc}`,
        background: this.bgc
      }
    },
    vStyle () {
      return {
        width: this.width ? (this.width + 4) + 'rpx' : `calc(100% + 4rpx)`, 
        height: (this.height || this.width) ? ((this.height || this.width) - (this.offsetY * 2)) + 'rpx' : `` ,
        transform: `translateX(-2rpx) translateY(${parseInt(this.offsetY)}rpx)`,
        background: this.bgc
      }
    }
  }
}
</script>

<style lang="scss">
.w-sk{
  width: 100%;
}
.sk {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  .t,
  .o {
    width: 100%;
    position: absolute;
    background: #fffbea;
  }
  .t {
    z-index: 1;
  }
  .o {
    z-index: 2;
  }
  .v {
    position: relative;
    background: #fffbea;
    z-index: 3;
    border-radius: 6px;
    width: 100%;
  }
}
</style>